import React, { memo } from 'react';
// import { connect } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import comBSlice from './store/comBSlice';

const { actions: { increment, decrement } } = comBSlice;

const ComA = (props) => {
  // const { num } = props;
  // const { handleIncrement, handleDecrement } = props;

  const dispatch = useDispatch();
  const num = useSelector(state => state.comBReducer);
  const handleIncrement = num => dispatch(increment(num));
  const handleDecrement = num => dispatch(decrement(num));

  return (
    <div>
      <p>ComA</p>
      <p>num: <b>{num}</b></p>

      <button onClick={() => handleIncrement(1)}>increase +1</button>
      <button onClick={() => handleDecrement(1)}>decrease -1</button>
    </div>
  )
}

// const mapStateToProps = state => ({
//   num: state.comBReducer
// });

// const mapDispatchToProps = dispatch => ({
//   handleIncrement(num) {
//     dispatch(increment(num));
//   },
//   handleDecrement(num) {
//     dispatch(decrement(num));
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(memo(ComA));
export default memo(ComA);